<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="./CSS/audio_control.css" />
<link type="text/css" href="CSS/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="js/json2.min.js"></script>
<script type="text/javascript">
var data='{"stereo":{"vol1":-21,"vol2":-12},\
"singletrack":{"vol1":-13,"vol2":-14,"vol3":-15,\
     "vol4":-16,"vol5":-17,"vol6":-18,"vol7":-19},\
"mainoutput":-20,\
"auxiliaryoutput":{"vol1":-21,"vol2":-22}\
 }';
 var jo = JSON.parse(data);
$(function() {  
	// setup slider
	$( ".slider" ).each(function() {
		// read initial values from markup and remove that
		//var value = parseInt( $( this ).text(), 10 );
        var value = selectvol(jo, $(this).attr("name"));
       //  alert(value);		
		$( this ).empty().slider({
			value: value,
			range: "min",
			disabled:"true",
			min:-79,
			max:0,
			animate: true,
			orientation: "vertical",
			slide: function( event, ui ) {
			 
			   $( "#"+$(this).attr("name")).val(ui.value );
		},
		stop: function( event, ui ) {	
            
			 var name =   $(this).attr("id");
		
		    alert(" "+name+" "+ ui.value);
		 

			  	   /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/audio_control.cgi,		 
                       data: "operation="+name+"&"+"volume="+ui.value,		  
                        success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
                  }); */ 
			   
			    
			 
			      
				
				
		 } 
		
		});
	});
	
	$( "table  input[type=text]" ).each(function() {
			
			
		   var audiotxtid = $(this).attr("id");
		  
		   var value = $("#s"+audiotxtid).slider( "value");
			$(this).val(value);
		});
		
		
		
		$(".audiobutton").click(function(){

            
           var name =   $(this).attr("name");
		   var op= name.substring(8);

		   var audiotxt= name.substring(1,8);
		  // alert(audiotxt);
		   var sid= name.substring(0,8);
		   var smin= $("#"+sid).slider( "option","min");
		   var smax= $("#"+sid).slider( "option","max");
		   
		   var value = $("#"+sid).slider( "value");
		   if(op =="+"){
            // $("#"+sid).slider( "value",value+1);
			 	$("#"+sid).slider( "option", "value", (value+1)>smax?smax:(value+1) );
			
             }
		   
		   
		   if(op=="-"){
          //  $("#"+sid).slider( "value",value-1);
			//$("#"+sid).slider(""option, "value",value-1);
			$("#"+sid).slider( "option", "value", (value-1)<smin?smin:(value-1) );
			
              }
		     $( "#"+audiotxt).val($("#"+sid).slider( "value"));
			 
			 alert(name+" "+ $( "#"+audiotxt).val());
			   /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/audio_control.cgi,		 
                       data: "operation="+name+"&"+"volume="+$( "#"+audiotxt).val(),		  
                        success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
           

     });
	 
	 $(".audiobutton").mouseup(function(){
	                   pressed=false;
					//   alert(pressed);
					
		
					if(typeof (intervalProcess)!="undefined" ){
	                  clearInterval(intervalProcess);
					  }
              	    if(typeof (timeoutProcess)!="undefined" ){
                       clearTimeout(timeoutProcess);
					   }

     });
	
	 
	$(".audiobutton").mousedown(function(){

       /*    
	   
	   
        */ 
		      pressed = true;
		
				 
		var $name= $(this).attr("name");
			 
		
			
			 timeoutProcess=setTimeout(function(){
	
	                	if(pressed==true) {
						//alert(pressed);
                        intervalProcess=setInterval(function(){
                              // var name =   $(this).attr("name");
							  var name= $name;
							 // alert(name);
		   var op= name.substring(8);

		   var audiotxt= name.substring(1,8);
		  // alert(audiotxt);
		   var sid= name.substring(0,8);
		   var smin= $("#"+sid).slider( "option","min");
		   var smax= $("#"+sid).slider( "option","max");
		  
		   
		   var value = $("#"+sid).slider( "value");
		   if(op =="+"){
         //    $("#"+sid).slider( "value",value+1);
			 	$("#"+sid).slider( "option", "value", (value+1)>smax?smax:(value+1) );
			
             }
		   
		   
		   if(op=="-"){
          //  $("#"+sid).slider( "value",value-1);
		
			$("#"+sid).slider( "option", "value", (value-1)<smin?smin:(value-1) );
			
              }
		     $( "#"+audiotxt).val($("#"+sid).slider( "value"));
                        },150);
						}
                    },250);
					
           

     });
	 
	 	$(".switchbutton").click(function(){
		       var channel = $("input[type=radio][name=dc]:checked").val();
               if( channel ==undefined) 
              {

              alert("请选择切换音量通道");
              return
             } else{
		      var volume = $("#"+channel).slider( "value");
			  var operation = $(this).attr("name");
              alert(channel+" "+volume+" "+$(this).val());
		
			  /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/audio_control.cgi,		 
                       data: "operation="+operation+"&"+"channel="+channel+"&"+"volume="+volume,		  
                        success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
			  }

     });
	    $("table  input[type=button][name=reset]").click(function(){
            
            var   value =  $("input[type=radio][name=reset]:checked").attr("value");
        
               resetdata(data,value);
             
			
			 	// value = 100% or 50%  or 30%
			
			   /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/audio_control.cgi,		 
                       data: "operation=reset&option="+value,		  
                        success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
   

        
			   
				 
				 
         alert("已复位: "+value); 
          
         
     }); 
});
function resetdata(data,value){

          switch(value)
		   {
		   case "100%":
		        data='{"stereo":{"vol1":0,"vol2":0},\
                "singletrack":{"vol1":0,"vol2":0,"vol3":0,\
                 "vol4":0,"vol5":0,"vol6":0,"vol7":0},\
                  "mainoutput":0,\
                 "auxiliaryoutput":{"vol1":0,"vol2":0}\
                   }';
		      	$( "table  input[type=text]" ).each(function() {
                         $(this).val(0);
		         });
				 
				     $( ".slider" ).each(function() {
				 
				 
				  
	                   $(this).slider( "value",0);
	               });
				   return;
		   case "50%":
		        data='{"stereo":{"vol1":-40,"vol2":-40},\
                "singletrack":{"vol1":-40,"vol2":-40,"vol3":-40,\
                 "vol4":-40,"vol5":-40,"vol6":-40,"vol7":-40},\
                  "mainoutput":-40,\
                 "auxiliaryoutput":{"vol1":-40,"vol2":-40}\
                   }';
		   
		      $( "table  input[type=text]" ).each(function() {
                         $(this).val(-40);
		         });
				 
				     $( ".slider" ).each(function() {
				 
				 
				  
	                   $(this).slider( "value",-40);
	               });
				   return;
		   case "30%":
		          data='{"stereo":{"vol1":-55,"vol2":-55},\
                "singletrack":{"vol1":-55,"vol2":-55,"vol3":-55,\
                 "vol4":-55,"vol5":-55,"vol6":-55,"vol7":-55},\
                  "mainoutput":-55,\
                 "auxiliaryoutput":{"vol1":-55,"vol2":-55}\
                   }';
		         $( "table  input[type=text]" ).each(function() {
                         $(this).val(-55);
		         });
				 
				     $( ".slider" ).each(function() {
				 
				 
				  
	                   $(this).slider( "value",-55);
	               });
				   return;
		   default:
		     return;
		  
		  
		  
		  }


}
function selectvol(data, sname) 
{


   switch (sname)
   {
   case "laudio1":
       return data.stereo.vol1;
   case "laudio2":
       return data.stereo.vol2;
   case "daudio1":
       return data.singletrack.vol1;
   case "daudio2":
       return data.singletrack.vol2;
    case "daudio3":
       return data.singletrack.vol3;
	case "daudio4":
       return data.singletrack.vol4;
	case "daudio5":
       return data.singletrack.vol5;
	case "daudio6":
       return data.singletrack.vol6;
	case "daudio7":
       return data.singletrack.vol7;
	case "zaudio1":
       return data.mainoutput;
	case "faudio1":
       return data.auxiliaryoutput.vol1;
	case "faudio2":
       return data.auxiliaryoutput.vol2;
    default:
       return 999;
}

}; 

var   flag   =   1; 
function   changeStatus() 
{ 
      //    alert(flag);
        if   (flag   ==   1) 
        { 
               
			   
			   var isch = $("input[type=checkbox]:checked").val();
               if( isch ==undefined) 
              {

              alert("请选择切换音量通道");
              return
             }

     var strc= " ";
	 	$("input[type=checkbox]:checked").each(function(){
          strc += $(this).attr("name")+"= "+$("#"+$(this).attr("value")).slider( "value")+" ";
            })
			
			$("#switchbutton1").css("borderLeftColor","#fff");
			$("#switchbutton1").css("borderTopColor","#fff");
			$("#switchbutton1").css("borderRightColor","#fff");
			$("#switchbutton1").css("borderBottomColor","#fff");
			  /* $("#switchbutton1").css({
			    "borderLeftColor" :"#fff",
                "borderTopColor":"#fff", 
                "borderRightColor":"#fff",
                 "borderBottomColor":"#fff",
				}) ;*/ //not supported in IE7.0
				
				$("#switchbutton1").attr("value","已切换至辅助输出");
                flag   =   0; 
				alert(strc+" 已切换");
        } 
        else 
        { 
		     
             $("input[type=checkbox]:checked").each(function(){
               $(this).attr("checked",false);
            })
			
			$("#switchbutton1").css("borderLeftColor","#000");
			$("#switchbutton1").css("borderTopColor","#000");
			$("#switchbutton1").css("borderRightColor","#000");
			$("#switchbutton1").css("borderBottomColor","#000");
			/* $("#switchbutton1").css({
			    "borderLeftColor" :"#000",
                "borderTopColor":"#000", 
                "borderRightColor":"#000",
                 "borderBottomColor":"#000",
				}) ;*/ //not supported in IE7.0
              $("#switchbutton1").attr("value","切换至辅助输出");
            
              flag   =   1; 
        }
		}; 

</script>	
</head>

<body>
<p id="text_area0">音频控制</p>
<div id="audio_control"> 
<table id="first" cellpadding="2px">
    <caption>立体声音量控制</caption>
    <tr>
        <th>音量1</th>
        <th>音量2</th>
    </tr>
    <tr>
        <td><input type="text" id="laudio1"   onfocus="this.blur()"/></td>
        <td><input type="text" id="laudio2"   onfocus="this.blur()" /></td>
    </tr>
    <tr>
        <td><input type="button" class="audiobutton"  name="slaudio1+"  value="+" /></td>
        <td><input type="button" class="audiobutton"  name="slaudio2+"   value="+"/></td>
    </tr>
	<tr>
        <td><div class="slider" id="slaudio1" name="laudio1">-20</div></td>
        <td><div class="slider" id="slaudio2" name="laudio2">-30</div></td>
    </tr>
	<tr>
        <td><input type="button" class="audiobutton"  name="slaudio1-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="slaudio2-" value="-"/></td>
    </tr>
    <tr> 
         <td class="color"><input name="dc" type="radio" value="slaudio1" />确认</td>
         <td class="color"><input name="dc" type="radio" value="slaudio2" />确认</td>
    </tr>
</table>
<table id="second" cellpadding="2px">
    <caption>单声道声音量控制</caption>
    <tr>
        <th>音量1</th>
        <th>音量2</th>
        <th>音量3</th>
        <th>音量4</th>
        <th>音量5</th>
        <th>音量6</th>
        <th>音量7</th>
        <th></th>
    </tr>
    <tr>
        <td><input type="text" id="daudio1"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio2"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio3"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio4"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio5"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio6"  onfocus="this.blur()" /></td>
        <td><input type="text" id="daudio7"  onfocus="this.blur()" /></td>
    </tr>
    <tr>
        <td><input type="button" class="audiobutton" name="sdaudio1+"  value="+" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio2+"  value="+"/></td>
        <td><input type="button" class="audiobutton"  name="sdaudio3+"  value="+"/></td>
        <td><input type="button" class="audiobutton"  name="sdaudio4+"  value="+"/></td>
        <td><input type="button" class="audiobutton"  name="sdaudio5+"  value="+"/></td>
        <td><input type="button" class="audiobutton"  name="sdaudio6+"  value="+"/></td>
        <td><input type="button" class="audiobutton"  name="sdaudio7+"  value="+"/></td>
        <td>0dB</td>
    </tr>
	<tr>
        <td><div class="slider" id="sdaudio1" name="daudio1">-20</div></td>
        <td><div class="slider" id="sdaudio2" name="daudio2">-30</div></td>
        <td><div class="slider" id="sdaudio3" name="daudio3">-40</div></td>
        <td><div class="slider" id="sdaudio4" name="daudio4">-50</div></td>
        <td><div class="slider" id="sdaudio5" name="daudio5">-60</div></td>
        <td><div class="slider" id="sdaudio6" name="daudio6">-70</div></td>
        <td><div class="slider" id="sdaudio7" name="daudio7">-79</div></td>
        <td>
            <div class="index"></div>
            <p>-40dB</p>
            <div class="index"></div>
        </td>
    </tr>
	<tr>
        <td><input type="button" class="audiobutton"  name="sdaudio1-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio2-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio3-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio4-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio5-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio6-" value="-" /></td>
        <td><input type="button" class="audiobutton"  name="sdaudio7-" value="-" /></td>
        <td>-78.75dB</td>
    </tr>
    <tr> 
         <td class="color"><input name="dc" type="radio" value="sdaudio1" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio2" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio3" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio4" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio5" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio6" />确认</td>
         <td class="color"><input name="dc" type="radio" value="sdaudio7" />确认</td>
    </tr>
</table>
<table id="third">
    <tr>
         <td><input  class="switchbutton"  name="f1" type="button" value="切换到辅助1" /></td>
         <td><input  class="switchbutton"  name="f2" type="button" value="切换到辅助2" /></td>
    </tr>
    <tr>
         <td><input   class="switchbutton"  name="f12" type="button" value="切换到辅助1&2" /></td>
         <td><input   class="switchbutton"  name="d12" type="button" value="断开1&2" /></td>
    </tr>
    <tr>
         <td><div><a href="equalizer.html" target="showframe">均衡设置</a></div></td>
    </tr>
</table>
<table id="six">
	<tr>
		<td><input type="radio" name="reset" value="100%" />最大</td>
    </tr>
    <tr>
        <td><input type="radio"  checked="checked"  name="reset" value="50%" />50%</td>
    </tr>
	<tr>
        <td><input type="radio" name="reset" value="30%" />30%</td>
    </tr>
	<tr>
        <td><input type="button" name="reset" value="复位" /></td>
    </tr>
</table>
<table id="four">
    <caption>主输出</caption>
    <tr>
        <th>音量</th>
    </tr>
	<tr>
	<td><input type="text" id="zaudio1"   onfocus="this.blur()"/></td>
    
    </tr>
    <tr>
        <td><input type="button" class="audiobutton" name="szaudio1+"   value="+" /></td>
    </tr>
	<tr>
        <td><div class="slider" id="szaudio1" name="zaudio1">-59</div></td>
    </tr>
	<tr>
        <td><input type="button" class="audiobutton" name="szaudio1-"  value="-" /></td>
    </tr>
</table>
<table id="five">
    <caption>辅助输出</caption>
    <tr>
        <th>辅助输出1</th>
        <th>辅助输出2</th>
        <th></th>
    </tr>
	<tr>
	<td><input type="text" id="faudio1"   onfocus="this.blur()"/></td>
    <td><input type="text" id="faudio2"   onfocus="this.blur()" /></td>
	</tr>
    <tr>
        <td><input type="button" class="audiobutton" name="sfaudio1+"  value="+" /></td>
        <td><input type="button" class="audiobutton" name="sfaudio2+"  value="+"/></td>
        <td>0dB</td>
    </tr>
	<tr>
        <td><div class="slider" id="sfaudio1" name="faudio1">-65</div></td>
        <td><div class="slider" id="sfaudio2" name="faudio2">-66</div></td>
        <td>
            <div class="index"></div>
            <p>-40dB</p>
            <div class="index"></div>
        </td>
    </tr>
	<tr>
        <td><input type="button" class="audiobutton" name="sfaudio1-"  value="-" /></td>
        <td><input type="button" class="audiobutton" name="sfaudio2-"  value="-" /></td>
        <td>-79dB</td>
    </tr>
</table>
</div>
</body>
</html>
